<div [@routerTransition]>
  <div class="content d-flex flex-column flex-column-fluid">
    <sub-header [title]="'ActivityData' | localize" [description]="'PlayerDataManage' | localize">
      <div role="actions">
        <button type="button" class="btn btn-primary" (click)="goExport()" [buttonBusy]="exportLoading">
          <i class="icon-excel"></i>
          {{l('export')}}</button>
      </div>
    </sub-header>

    <div [class]="containerClass">
      <div class="card card-custom gutter-b">
        <div class="card-body">
          <form class="horizontal-form" autocomplete="off">
            <div>
              <div class="row align-items-center mb-4">
                <div class="col-xl-3">
                  <div class="form-group m-form__group align-items-center">
                    <label>{{l('userNickName')}}</label>
                    <div class="input-group">
                      <input (keyup.enter)="getPlayerDataList()" [(ngModel)]="filterText" name="filterText" autoFocus class="form-control m-input"
                        type="text">
                      <!-- <span class="input-group-btn">
                      <button (click)="getPlayerDataList()" class="btn btn-primary" type="submit">
                        <i class="icon-sousuo-sousuo"></i>
                      </button>
                    </span> -->
                    </div>
                  </div>
                </div>
                <div class="col-3" style="position:relative;">
                  <div class="form-group m-form__group align-items-center">
                    <label>{{l('gameTime')}}</label>
                    <date-range-picker name="SampleDateRangePicker" [showButton]="false" [needInitDate]="true"
                      rangeMode="history" (buttonEmit)="getPlayerDataList()" [(startDate)]="StartTime"
                      [(endDate)]="EndTime">
                    </date-range-picker>
                  </div>
                </div>
                <div class="col-2">
                  <div class="form-group m-form__group align-items-center">
                    <label>{{l('activityName')}}</label>
                    <div class="input-group">
                      <select class="form-control" [(ngModel)]="ActivityId" name="metaTypeSelect2">
                        <option value="">{{l('AllTypes')}}</option>
                        <option [value]="item.id" *ngFor="let item of ActivityList">{{item.name}}</option>
                      </select>
                    </div>
                  </div>
                </div>
                <div class="col-2">
                  <div class="form-group m-form__group align-items-center">
                    <label>&nbsp;</label>
                    <div class="input-group">
                      <button type="button" class="btn btn-primary" [buttonBusy]="primengTableHelper.isLoading"
                        (click)="getPlayerDataList()">
                        <i class="la la-refresh"></i>
                        {{l("search")}}
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </form>

          <div class="row align-items-center">
            <!--<Primeng-Datatable-Start>-->
            <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
              <!-- resizableColumns="primengTableHelper.resizableColumns" -->
              <p-table #dataTable (onLazyLoad)="getPlayerDataList($event)" [value]="primengTableHelper.records"
                [rows]="primengTableHelper.defaultRecordsCountPerPage" [paginator]="false" [lazy]="true"
                [resizableColumns]="primengTableHelper.resizableColumns" [responsive]="primengTableHelper.isResponsive">
                <ng-template pTemplate="header">
                  <tr>
                    <th style="width:5%">{{l('Actions')}}</th>
                    <th style="width:5%">{{l('RecordId')}}</th>
                    <th>{{l('headImage')}}</th>
                    <th>{{l('UserName')}}</th>
                    <th>{{l('gender')}}</th>
                    <th>{{l('city')}}</th>
                    <th>{{l('province')}}</th>
                    <th>{{l('activityName')}}</th>
                    <th style="width:5%">{{l('from')}}</th>
                    <th>{{l('gameTime')}}</th>
                    <th>{{l('gameName')}}</th>
                  </tr>
                </ng-template>
                <ng-template pTemplate="body" let-record let-i="rowIndex">
                  <tr [pSelectableRow]="record" [attr.trid]="record.id">
                    <td>
                      <div class="btn-group dropdown" dropdown normalizePosition>
                        <button class="btn btn-sm btn-primary" (click)="goDetail(record)">
                          {{l("detail")}}
                        </button>
                      </div>
                    </td>
                    <td style="width:5%"> {{transIndex(i)}}</td>
                    <td>
                      <img [src]="fixFileUrl(record.headimgurl)" />
                    </td>
                    <td>
                      <span>{{record.nickname}}</span>
                    </td>
                    <td>
                      <span *ngIf="record.sex==1">{{l('male')}}</span>
                      <span *ngIf="record.sex==2">{{l('female')}}</span>
                    </td>
                    <td>
                      <span>{{record.city}}</span>
                    </td>
                    <td>
                      <span>{{record.province}}</span>
                    </td>
                    <td>
                      <span [title]="record.activityName">{{record.activityName}}</span>
                    </td>
                    <td>
                      <span *ngIf="record.snsType==0" [title]="l('Taobao')">{{l('Taobao')}}</span>
                      <span *ngIf="record.snsType==1" [title]="l('WeChat')">{{l('WeChat')}}</span>
                      <span *ngIf="record.snsType==2" [title]="l('Others')">{{l('Others')}}</span>
                    </td>
                    <td>
                      <span>{{record.startTime | date : "yyyy/MM/dd"}}</span>
                    </td>
                    <td>
                      <span>{{record.softwareName}}</span>
                    </td>
                  </tr>
                </ng-template>
                <ng-template pTemplate="emptymessage" let-records>
                  <tr *ngIf="primengTableHelper.records">
                    <td colspan="11" class="text-center">
                      <img class="emptymessage" src="/assets/common/images/placeholder/deviceHolder.png" />
                    </td>
                  </tr>
                </ng-template>
              </p-table>
              <div class="primeng-paging-container">
                <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage" #paginator
                  (onPageChange)="getPlayerDataList($event)" [totalRecords]="primengTableHelper.totalRecordsCount"
                  [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                </p-paginator>
                <span class="total-records-count">
                  {{l('TotalRecordsCount', primengTableHelper.totalRecordsCount)}}
                </span>
              </div>
            </div>
            <!--<Primeng-Datatable-End>-->
          </div>
        </div>
      </div>
    </div>

    <playerDataDetailModal #playerDataDetailModal></playerDataDetailModal>

  </div>
</div>